<template>
  <div class="auth-page">
    <div class="auth-container">
      <div class="branding">
        <h1>PTEA</h1>
        <p>欢迎使用我们的平台</p>
      </div>
      
      <el-card class="auth-card">
        <!-- 使用 Element Plus 的标签页组件来切换登录和注册表单 -->
        <el-tabs v-model="activeTab" @tab-click="handleTabChange">
          <el-tab-pane label="登录" name="login">
            <AuthForm mode="login" @submit="handleSubmit"/>
          </el-tab-pane>
          <el-tab-pane label="注册" name="register">
            <AuthForm mode="register" @submit="handleSubmit"/>
          </el-tab-pane>
        </el-tabs>
      </el-card>

      <div class="auth-footer">
        <p>© 2025 皮提有限公司 保留所有权利</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AuthForm from '@/components/AuthForm.vue'
import { useAuthStore } from '@/stores/authStore'

const authStore = useAuthStore()
const activeTab = ref('login')

/**
 * 处理标签页切换事件
 * 切换标签页时清除之前的错误信息
 */
const handleTabChange = () => {
  authStore.error = null
}

/**
 * 处理表单提交事件
 * 根据当前活动标签页（登录或注册）调用相应的 authStore 方法
 * @param {Object} formData - 表单数据对象
 */
const handleSubmit = async (formData) => {
  if (activeTab.value === 'login') {
    await authStore.login(formData)
  } else {
    await authStore.register(formData)
  }
}
</script>

<style scoped>
.auth-page {
  min-height: 100vh;
  background: url('@/assets/images/background.png') no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.auth-container {
  width: 400px;
  padding: 20px;
}

.branding {
  text-align: center;
  margin-bottom: 40px;
}

.branding h1 {
  font-size: 32px;
  color: #2c3e50;
  margin-bottom: 10px;
}

.auth-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.auth-footer {
  margin-top: 20px;
  text-align: center;
  color: #7f8c8d;
  font-size: 12px;
}
</style>